<script setup lang="ts">
import TabBar from '@/components/Tabbar/index.vue';
definePageMeta({
  layout: 'default2',
  title: '奖励领取',
  i18n: 'menu.reward',
})
const { t } = useI18n();
const active = ref(0);
const tabArr = [
  {
    id: 0,
    name: t('my_page.reward.all')
  },
  {
    id: 1,
    name: t('my_page.reward.noReward')
  },
]
</script>

<template>
  <div mx-auto text-16 text-dark dark:text-white>
    <TabBar :tabs="tabArr" :activeIndex="active" @updateActiveIndex="active = $event" :offset-top="46" />
    <div class="mx-10">
      <div v-if="active == 0">
        <!-- 每条记录 -->
        <div class="p-10 pt-0 bg-#ffffff rounded-10">
          <div class="flex items-center justify-between  p-10  my-10 border-b-1 border-#f6f6f6">
            <div class="flex items-start">
              <img src="/img/reward_icon2.png" alt="" class="w-24 mr-10">
              <div class="flex justify-between flex-col">
                <div class="text-14">升级奖励</div>
                <div class="text-12 color-#b1b0be mt-15">2025-04-23 17:00:00</div>
              </div>
            </div>
            <div class="text-right">
              <div class=" font-bold ">99999</div>
              <div class="text-12 color-#b1b0be my-5">需1倍数流水</div>
              <div class="px-8 py-2  text-10 rounded-full border-1 bg-#149eff text-#ffffff">立即领取</div>
            </div>
          </div>
          <div class="flex items-center justify-between  p-10  my-10 border-b-1 border-#f6f6f6">
            <div class="flex items-start">
              <img src="/img/reward_icon1.png" alt="" class="w-24 mr-10">
              <div class="flex justify-between flex-col">
                <div class="text-14">任务描述</div>
                <div class="text-12 color-#b1b0be mt-15">2025-04-23 17:00:00</div>
              </div>
            </div>
            <div class="text-right">
              <div class="font-bold ">99999</div>
              <div class="text-12 color-#b1b0be mb-5">需1倍数流水</div>
              <div class="text-#e99982 text-10 ">已领取</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="active == 1">

      </div>
      <div class="text-#84889f text-10 text-center mt-10">{{t("common.no_more")}}</div>
    </div>

  </div>
</template>
<style lang="css" scoped>
.active-tab {
  color: #539cd6;
  border: 1px solid #539cd6;
  background: #ffffff;
}
</style>
